<template>
  <div class="home-container">
    <el-row class="row-bg" :span="28">
      <el-col :xs="24" :sm="24" :lg="28">
        <div class="header-container flex-col">
          <div class="header flex-row">
            <ul class="flex-row">
              <li
                v-for="(item, index) in tablist"
                :key="index"
                :class="[activeIndexFz == index ? 'active' : '']"
                @click="switchForAndZh(index)"
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
          <el-row class="custom" :gutter="10">
            <el-col :xs="24" :sm="24" :lg="6">
              <div class="grid-content">
                <div class="title">累计用户</div>
                <div class="right">
                  <div class="h2">
                    <count-to :start-val="0" :end-val="totalData.totalUser" :duration="2000" :autoplay="true"></count-to
                  ></div>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <div class="grid-content">
                <div class="title">昨日新增用户</div>
                <div class="right">
                  <div class="h2"
                    ><count-to :start-val="0" :end-val="totalData.totalIncrease" :duration="2000" :autoplay="true"></count-to
                  ></div>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <div class="grid-content">
                <div class="title">导航用户数量</div>
                <div class="right">
                  <div class="h2"
                    ><count-to :start-val="0" :end-val="totalData.totalDaohang" :duration="2000" :autoplay="true"></count-to
                  ></div>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <div class="grid-content">
                <div class="title">无人机用户数量</div>
                <div class="right">
                  <div class="h2"
                    ><count-to :start-val="0" :end-val="totalData.totalDroneUser" :duration="2000" :autoplay="true"></count-to
                  ></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="echart-list flex-row">
          <el-card class="box-card">
            <div id="cateEcharts"></div>
          </el-card>

          <div class="uv-card flex-col">
            <div class="flex-row flex-justify-between uv-card-header">
              <span>访问页面排行榜</span>
              <ul class="flex-row ubtn">
                <li
                  v-for="(item, index) in ulist"
                  :key="index"
                  :class="[activeIndex == index ? 'active' : '']"
                  @click="switchPvandUv(index, item.label)"
                  >{{ item.label }}</li
                >
              </ul>
            </div>
            <div class="ulist">
              <ul class="paihang-list">
                <li class="flex-row">
                  <span class="dot">1</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
                <li class="flex-row">
                  <span class="dot">2</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
                <li class="flex-row">
                  <span class="dot">3</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
                <li class="flex-row">
                  <span class="nodot">4</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
                <li class="flex-row">
                  <span class="nodot">5</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
                <li class="flex-row">
                  <span class="nodot">6</span>
                  <span class="content">社会主义接班人</span>
                  <span>121221</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts'
  import { getHomeTotal, getEchartsData, getUvWithPv } from '@/api/home'
  import CountTo from '@/components/CountTo/index.vue'
  //统计数据展示
  const totalData = reactive({
    totalUser: 0,
    totalIncrease: 0,
    totalDaohang: 0,
    totalDroneUser: 0,
  })
  //pv还是uv
  const activeIndex = ref(0)
  const ulist = ref([
    { label: 'UV', key: 0 },
    { label: 'PV', key: 1 },
  ])
  //国内还是国外
  const activeIndexFz = ref(0)
  const tablist = ref([
    { label: '国内', key: 0 },
    { label: '国外', key: 1 },
  ])
  const formData = ref({
    regionCode: 0,
    type: 'uv',
  })
  //国内国外切换数据
  const switchForAndZh = (index) => {
    formData.value.regionCode = index
    getTotal()
    getEcharts()
    getUvWithPvData()
  }
  //pv和uv切换
  const switchPvandUv = (index, type) => {
    activeIndex.value = index
    formData.value.type = type
    getUvWithPvData()
  }

  let chart
  const initChart = (data) => {
    let chart = echarts.init(document.getElementById('cateEcharts'))

    //初始化echarts
    const option = {
      backgroundColor: '#fff',

      color: ['#73A0FA', '#73DEB3', '#FFB761'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      grid: {
        left: '15',
        right: '70',
        bottom: '10',
        top: '28',
        containLabel: true,
      },

      xAxis: {
        type: 'category',
        data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
        boundaryGap: false,
        splitLine: {
          //网格线
          show: true,
          lineStyle: {
            color: ['#b1b1b1'],
            type: 'dashed',
          },
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
      },
      yAxis: {
        type: 'value',

        axisLabel: {
          color: '#999',
          textStyle: {
            fontSize: 12,
          },
        },
        splitLine: {
          //网格线
          show: true,
          lineStyle: {
            color: ['#b1b1b1'],
            type: 'dashed',
          },
        },
        axisTick: {
          show: true,
          color: '#999',
        },
        axisLine: {
          show: true,
          color: '#999',
        },
      },
      series: [
        {
          name: '访问次数',
          type: 'line',
          smooth: true,
          data: [13, 2, 2, 32, 123, 23, 136],
        },
      ],
    }
    chart.setOption(option)
    return chart
  }
  //显示x累计统计总数的接口
  const getTotal = () => {
    getHomeTotal(formData.value).then((res) => {})
  }
  //获取折线图的接口
  const getEcharts = () => {
    getEchartsData(formData.value).then((res) => {
      initChart(res)
    })
  }
  //获取旁边的pv数据
  const getUvWithPvData = () => {
    getUvWithPv(formData.value).then((res) => {})
  }
  onMounted(() => {
    chart = initChart()
    window.addEventListener('resize', function () {
      chart && chart.resize()
    })
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
